<template>
	<div class="container">
		<div class="abs">
			<el-page-header @back="$router.push('/')" content="">
			</el-page-header>
		</div>
		<div id="main">
		</div>
	</div>
</template>
<script>
export default {
  name: 'Echarts',
  data () {
    return {}
  },

  methods: {
    myEcharts () {
      var echarts = require('echarts')
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom, 'dark')
      var option

      option = {
        tooltip: {
		  trigger: 'item',
		  formatter: '{b}'
        },
        legend: {
          show: false,
		  left: 'center',
          top: '30',
		  itemGap: 20,
		  itemWidth: 30,
		  itemHeight: 20
        },
        // toolbox: {
        //   show: true,
        //   feature: {
        //     mark: {
        //       show: true
        //     },
        //     dataView: {
        //       show: true,
        //       readOnly: false
        //     },
        //     restore: {
        //       show: true
        //     },
        //     saveAsImage: {
        //       show: true
        //     }
        //   }
        // },
        series: [{
          name: '全局导航',
          type: 'pie',
          radius: [100, 300],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          label: {
            position: 'inside',
            formatter: '{b}'
          },
          data: [{
            value: 40,
            name: '库存分布',
            label: {
              normal: {
			        formatter: '',
			        show: true,
			        width: 100,
			        height: 100,
			        position: 'inner',
			        backgroundColor: {
                  image: './icon/库存.png'
			        }
              }
		  }
		  },
          {
            value: 38,
            name: '库存历史',
            label: {
              normal: {
          			        formatter: '',
          			        show: true,
          			        width: 90,
          			        height: 90,
          			        position: 'inner',
          			        backgroundColor: {
                  image: './icon/历史.png'
          			        }
              }
            }
          },
          {
            value: 36,
            name: '推荐食谱',
            label: {
              normal: {
          			        formatter: '',
          			        show: true,
          			        width: 80,
          			        height: 80,
          			        position: 'inner',
          			        backgroundColor: {
                  image: './icon/食材分布.png'
          			        }
              }
            }
          },
          {
            value: 32,
            name: '数据修改',
            label: {
              normal: {
          			        formatter: '',
          			        show: true,
          			        width: 70,
          			        height: 70,
          			        position: 'inner',
          			        backgroundColor: {
                  image: './icon/数据修改.png'
          			        }
              }
            }
          },
          {
            value: 30,
            name: '添加食材',
            label: {
              normal: {
          			        formatter: '',
          			        show: true,
          			        width: 60,
          			        height: 60,
          			        position: 'inner',
          			        backgroundColor: {
                  image: './icon/添加食材.png'
          			        }
              }
            }
          },
          {
            value: 28,
            name: '新鲜程度',
            label: {
              normal: {
          			        formatter: '',
          			        show: true,
          			        width: 50,
          			        height: 50,
          			        position: 'inner',
          			        backgroundColor: {
                  image: './icon/新鲜状况.png'
          			        }
              }
            }
          }
          ]
        }],
        aria: {
				    enabled: true,
				    decal: {
				      show: true
				    }
				  }
      }
      option && myChart.setOption(option)
	  myChart.on('click', function (params) {
	    if (params.value === 30) {
          console.log('添加食材视图导航')
        } else if (params.value === 40) {
		  window.location.href = '#/kucun'
        } else if (params.value === 38) {
		  window.location.href = '#/lishi'
        } else if (params.value === 36) {
		  // window.location.href = '#/aituijian'
          console.log('推荐功能')
        } else if (params.value === 32) {
		  console.log('数据修改视图导航')
        } else if (params.value === 28) {
		  window.location.href = '#/xinxian'
        }
	  })
    }
  },
  created () {},
  mounted () {
    this.myEcharts()
  }
}
</script>

<style scoped>
	body {
		margin: 0;
	}

	.container {
		position: relative;
		width: 10rem;
		height: 5.625rem;
		margin: 0 auto;
		background: #100c2a;
		border: 1px solid #797979;
	}

	#main {
		width: 100%;
		height: 100%;
		z-index: 1;
	}
</style>
